<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head>
  
  <meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
  <title>2.2.1. Instructor Sub-Tab</title>

  
</head><body>

<h2> 2.2.1 Instructor Sub-Tab </h2>


<hr />
<h2>Instructor Tab Overview</h2>
<p>
	This is a view that is available only to a system admin.  It will allow the admin to see all
	of the teachers, and their related info.  The window on the left contains every instructor's name
	that is in the database, sorted in alphabetical order (by last name).  When selecting an instructor 
	on the left, it becomes highlighted (like we see below for "Bellardo, John").  When selecting an
	instructor, the window on the right displays all that instructor's information.  All information 
	is displayed in <strong>editable</strong> text-fields.<br /> <br />
	
	****UPDATE**** Figure 1 has the current version of what the Instructor Information
	window looks like.  It has a new "Preferences" button.  
</p>

<hr /><br />

<div align="center">
<a href="../images/instructor_overview_empty.png"><img src="../images/instructor_overview_empty.png" width="800" height="450"/></a>

<p>Figure 1.  Instructors Tab (overview) - before any instructors have been added.</p>
</div>

<div align="center">
<a href="../images/instructor_overview.png"><img src="../images/instructor_overview.png" width="800" height="450"/></a>

<p>Figure 2.  Instructors Tab (overview) - after a couple instructors have been added.  Adding an
	instructor is shown in figure 8.</p>
</div>

<div align="center">
<a href="../images/instructor_overview2.png"><img src="../images/instructor_overview2.png" width="800" height="450"/></a>

<p>Figure 3.  Instructors Tab (overview) - after a couple instructros have been added.</p>
</div>
<hr />

<h2>Modifying an Instructor</h2>
<p>
	To modify an instructor's information, in this case professor Bellardo's information, simply select
	Bellardo from the left window to pull up his information.  Once his information is displayed in the 
	right window, all the text-fields are editable.  One can simply click inside the phone number field to
	change / modify.  Once modifications are made, a user can "commit changes" to write the new values
	to the database, or "restore" the text fields to the previous values.<br /><br />
	Each field has the following constraints:
	<ol>
		<li>First Name: Must contain ONLY alphabetical characters (a-z and A-Z).  Limited to 30 characters.</li>
		<li>Last Name: Same as first name.</li>
		<li>Phone Number: Must contain ONLY numerical characters and the dash character.  (1-9 and '-') Limited to 12 characters.</li>
		<li>Office Number: Can contain alphanumeric characters.  Limited to 10 characters.</li>
		<li>Department: Must contain ONLY alphabetical characters.  Limited to 100 characters.</li>
		<li>Email Address:  Must be a valid email address, and properly formatted (name@domain.com)</li>
	</ol>
	
	**Any violation of these restrictions results in the error/ alert message shown in figure 7
	The alert is triggered when the user clicks off the text-field they just modified.  After the error
	message is viewed and the user clicks "ok," the text-field in violation will have the cursor inside,
	ready to edit.
</p>
<hr /><br />
<div align="center">
<a href="../images/instructor_edit_1.png"><img src="../images/instructor_edit_1.png" width="800" height="450"/></a>

<p>Figure 4. Editing the phone number text-field -- clicking inside text-field and deleting the phone number.</p>
</div>

<div align="center">
<a href="../images/instructor_edit_2.png"><img src="../images/instructor_edit_2.png" width="800" height="450"/></a>

<p>Figure 5. Editing the phone number text-field  -- changing the phone number.</p>
</div>

<div align="center">
<a href="../images/instructor_edit_3.png"><img src="../images/instructor_edit_3.png" width="800" height="450"/></a>

<p>Figure 6. Once modifications have been made, a user clicks the "commit" button to update the instructor's
information in the database.</p>
</div>

<div align="center">
<a href="../images/instructor_edit_error.png"><img src="../images/instructor_edit_error.png" width="800" height="450"/></a>

<p>Figure 7. Error message generated when violating the phone number constraint.</p>
</div>
<br /><hr />

<h2>Adding an Instructor</h2>

<p>
	To add an instructor, one would click the "+" button at the bottom of the left window, as shown in figure 8.
	Once the user clicks this button, the window on the right will display a blank set of information 
	corresponding the new instuctor just added.  One would fill these text-fields in as appropriate, and 
	when finished, one would click the "commit changes" button to update the information of the new instructor.
	Once a user clicks the "commit changes" button, the instructor name will update to the new name.  Clicking 
	"restore" in this case, will undo the add.  
</p>

<hr /><br />
<div align="center">
<a href="../images/instructor_add_new.png"><img src="../images/instructor_add_new.png" width="800" height="450"/></a>

<p>Figure 8.  After clicking the "+" button, this is what the interface will look like.</p>
</div>

<div align="center">
<a href="../images/instructor_add_commit.png"><img src="../images/instructor_add_commit.png" width="800" height="450"/></a>

<p>
Figure 9.  After clicking the "commit changes" button, the window on the left is updated to hold 
the full name of what was added in the right window.  Also, the newly added instructor is placed in
alphabetical order amongst the other instructors.
</p>
</div>
<br /><hr />

<h2>Modifying an Instructor's Preferences</h2>

<p>
	***It is important to note that these preferences are the copied versions of the permanent 
	preferences stored in the master database.  Each generated schedule gets a copy of the preferences
	used to generate that schedule.  The admin has the right to change those copies, but only 
	the individual instructors can modify their permanent preferences in the master database. <br /><br />
	
	To modify an instructor's preferences, one would select the instructor of interest in the 
	left hand window.  Once that instructor is selected, the window on the right will update 
	to that instructor's details, of which a "preference" button will appear (as shown in figure 10).
	Selecting the "preferences" button will bring up a new window shown in figure 10.  Again, since 
	these are copies of the master preferences, and reflect what the preferences were at the time
	a schedule was generated, the dialog box asks for which schedule they would like to edit preferences
	for. 
</p>

<hr /><br />
<div align="center">
<a href="../images/instructor_edit_preference1.png"><img src="../images/instructor_edit_preference1.png" width="800" height="450"/></a>

<p>Figure 10.  Selecting the desired instructor, and then selecing the "preferences" button.</p>
</div>

<div align="center">
<a href="../images/instructor_edit_preference2.png"><img src="../images/instructor_edit_preference2.png" width="800" height="450"/></a>

<p>Figure 11.  After clicking the "preference" button, this dialog appears.</p>
</div>

<div align="center">
<a href="../images/instructor_edit_preference3.png"><img src="../images/instructor_edit_preference3.png" width="800" height="450"/></a>

<p>Figure 12.  Once the desired schedule is selected, click the "ok" button to load those preference
in the next window.</p>
</div>

<div align="center">
<a href="../images/instructor_edit_preference4.png"><img src="../images/instructor_edit_preference4.png" width="800" height="450"/></a>

<p>Figure 13.  This is a similar view as the instructors view.  Selecting a preference on
the left populates the right windows details.</p>
</div>
<br /><hr />




<br>
<br>
<br>
<br>
<hr width=80% size=3>
<center>
<font size=-1>
<font color=black> Prev: </font>[none]
 | <font color=black> Next: </font><a href="courses.html"><em>Courses</em></a>
 | <font color=black> Up: </font><a href="index.html">Database Management</a>
 | <font color=black> Top: </font><a href="../../index.html">index</a></font>
</center>
<hr width=80% size=3>

</body></html>
